<!-- 首页 -->
<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="swiper">
        <Swiper :swiperList="swiperList">
          <template v-slot:item="item">
            <div class="swiperItems">
              <img :src="item.items.imgUrl" alt="">
            </div>
          </template>
        </Swiper>
    </div>
    <!-- 一级导航栏 -->
    <div class="flex navWraps">
      <div class="allFlex flexColumn justifyCenter alignCenter" @click="next('lifePayCost')">
        <img class="navImg" src="@/assets/home/shhjfIcon.png" alt="">
        <span>生活缴费</span>
      </div>
      <div class="allFlex flexColumn justifyCenter alignCenter" @click="next('')">
        <img class="navImg" src="@/assets/home/bkxmIcon.png" alt="">
        <span>爆款项目</span>
      </div>
      <div class="allFlex flexColumn justifyCenter alignCenter" @click="next('')">
        <img class="navImg" src="@/assets/home/shklmIcon.png" alt="">
        <span>闪客联盟</span>
      </div>
    </div>
    <!-- 二级导航栏 -->
    <div class="secNav">
      <van-grid :column-num="4" :border="false">
        <van-grid-item @click="secNavNext(item)" v-for="item in navList" :key="item.id" >
          <van-image :src="item.imgUrl"/>
          <div class="secNavText">{{item.title}}</div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 客服 -->
    <lifePayCostService></lifePayCostService>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance, provide } from 'vue';
import Swiper from '@/components/Swiper';
import storage from 'store';
import { ACCESS_TOKEN , BRANDID } from '@/utils/types';
import { Grid , GridItem , Image as VanImage } from 'vant';
import lifePayCostService from '@/components/lifePayCostService';
export default {
  components: {
    Swiper,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [VanImage.name]: VanImage,
    lifePayCostService,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    // 轮播图列表数据
    const swiperList = ref([]);
    // 获取轮播图列表数据
    const getSwiper = () =>{
      proxy.$http.brandApi.queryAppInforMtion({infoType: 1,isBrand: true})
      .then(res=>{
        if(res.success){
          swiperList.value = res.data.content;
          console.log(swiperList.value,'swiper父组件')
        }else{
          proxy.$toast({position: 'bottom',message:res.errMessage})
        }
      })
    }
    getSwiper();
    provide('swiper',swiperList)

    // 获取二级导航栏
    const navList = ref([])
    const getSecondNav = () =>{
      proxy.$http.brandApi.queryAppInforMtion({infoType: 20,isBrand: true,})
      .then(res=>{
        if(res.success){
          navList.value = res.data.content;
        }else{
          proxy.$toast({position: 'bottom',message:res.errMessage})
        }
      })
    }
    getSecondNav();

    // 页面跳转
    const next = (name) =>{
      if(name != ''){
        proxy.$router.push({name: name});
      }else{
        proxy.$toast({message: '敬请期待',position: 'bottom'})
      }
    }

    // 二级导航栏跳转
    const secNavNext = (item) =>{
      if(item.jumpUrl.substring(0,4) == 'http'){
        // window.open(item.jumpUrl)
        window.location.href = item.jumpUrl
      }else{
        proxy.$toast({message: '敬请期待',position: 'bottom'})
      }
    }

    return {
      navList,
      next,
      swiperList,
      secNavNext,
    }
  }
}

</script>
<style scoped>
.home{
  background: url('../../assets/home/bg.png') no-repeat;
  background-size: 100%;
  height: 100vh;
  box-sizing: border-box;
}
.swiper{
  padding-top: 15px;
}
.swiperItems{
  margin: 0px 12px;
  height: 185px;
}
.swiperItems img{
  width: 100%;
  height: 100%;
}

/* 一级导航栏 */
.navWraps{
  text-align: center;
  font-size: 14px;
  color: #FFFFFF;
  margin: 10px 0;
}
.navImg{
  width: 72px;
  height: 67px;
  display: inline-block;
}
/* 二级导航栏 */
.secNav{
  padding: 10px 12px;
}
.van-grid{
  border-radius: 6px;
  overflow: hidden;
  background: #FFFFFF;
}
.van-image{
  width: 44px;
  height: 44px;
}
.secNavText{
  font-size: 12px;
  color: #888888;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>